<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>优当阅读</title>
	<link rel="stylesheet" type="text/css" href="../plug/swiper/css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="../plug/layui/css/layui.css">
	<link rel="stylesheet" type="text/css" href="../css/style.css">
	<link rel="stylesheet" type="text/css" href="../font/iconfont.css">
</head>
<!-- 注意body的class -->
<body class="">
	<!-- 加载层 -->
	<div class="load_contain m_flex_box flex_vc flex_hc">
		<svg width="58" height="58" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg">
   		 	<g fill="none" fill-rule="evenodd">
        		<g transform="translate(2 1)" stroke="#FFF" stroke-width="1.5">
		            <circle cx="42.601" cy="11.462" r="5" fill-opacity="1" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="1;0;0;0;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="49.063" cy="27.063" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;1;0;0;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="42.601" cy="42.663" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;1;0;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="27" cy="49.125" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;1;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="11.399" cy="42.663" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;1;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="4.938" cy="27.063" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;0;1;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="11.399" cy="11.462" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;0;0;1;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="27" cy="5" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;0;0;0;1" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		        </g>
		    </g>
		</svg>
	</div>
	<div class="cover_opc del_cover">
		<div class="cover_opc_center m_flex_box flex_vc">
			<div class="del_contain">
				<p>确认清空历史记录？</p>
				<div class="m_flex_box flex_jz del_btn_contain">
					<span class="del_cov_btn qx">取消</span>
					<span class="del_cov_btn qd">确认</span>
				</div>
			</div>
		</div>
	</div>
	<!-- 头部 -->
	<form class="top_nav pos_f">
		<a href="javascript:history.go(-1)" class="top_a nav_left">
			<i class="iconfont icon-left"></i>
		</a>
		<div class="nav_top_center nav_padd">
			<div class="top_search_contain m_flex_box flex_vc">
				<i class="iconfont icon-sousuo"></i>
				<input type="text" name="search" placeholder="书名作者关键词" class="like_search">
			</div>
		</div>
		<div class="top_a nav_right">
			<button class="nav_button">搜索</button>
		</div>
	</form>
	<div class="padd_top"></div>
	<div class="result_contain">
		<!-- 判断数据是否为空 -->
		<div class="result_kong" style="display: none;">
			<img src="../img/kong_search.png">
			<span>没有搜索到相关书籍~</span>
		</div>
		<div class="result_list">
			<a href="search_result.html">11111</a>
			<a href="search_result.html">11111</a>
			<a href="search_result.html">11111</a>
			<a href="search_result.html">11111</a>
			<a href="search_result.html">11111</a>
			<a href="search_result.html">11111</a>
			<a href="search_result.html">11111</a>
			<a href="search_result.html">11111</a>
			<a href="search_result.html">11111</a>
			<a href="search_result.html">11111</a>
			<a href="search_result.html">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam animi, atque maiores iusto eos similique voluptatem cum incidunt dolor libero deserunt sed nemo suscipit pariatur molestiae? Modi, porro, placeat. Nihil.</a>
		</div>
	</div>
	<div class="history_tit_contain m_flex_box flex_vc flex_jz">
		<p class="history_tit">历史搜索</p>
		<p class="history_del">删除</p>
	</div>
	<div class="history_list_contain">
		<a class="history_a" href="kind_detail.html">孩子王</a>
		<a class="history_a" href="kind_detail.html">孩子王</a>
		<a class="history_a" href="kind_detail.html">孩子王</a>
		<a class="history_a" href="kind_detail.html">孩子王</a>
		<a class="history_a" href="kind_detail.html">孩子王</a>
		<a class="history_a" href="kind_detail.html">孩子王</a>
		<a class="history_a" href="kind_detail.html">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est consequatur officia qui tempore, fuga quisquam quia, necessitatibus ratione facere officiis commodi molestiae nemo tenetur quibusdam, eveniet molestias sit voluptatem! Magni.</a>
	</div>

	<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="../js/public.js"></script>
	<script type="text/javascript" src="../plug/UI/js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="../plug/layui/layui.all.js"></script>
	<script type="text/javascript" src="../plug/lazy/jquery.lazyload.min.js"></script>
	<script type="text/javascript" src="../js/clamp.min.js"></script>
	<script type="text/javascript" src="../plug/swiper/js/swiper.jquery.min.js"></script>
	<script type="text/javascript" src="../js/reset_font.js"></script>
	<script type="text/javascript">
	    for(var i = 0;i<$(".recommend_dl_contain").length;i++){
	    	$clamp($(".recommend_intro")[i], {clamp: 3});
	    }
		var that;
		$("body").on("click",".history_del",function(){
			$(".del_cover").show("drop",200);
			 that = $(this);
		});
		/*取消按钮*/
		$('.qx').click(function(){
			$(".del_cover").hide("explode",200);
		});
		/*确定按钮*/
		$('.qd').click(function(){
			$(".del_cover").hide("drop",200);
			$(".history_list_contain").empty();
		});
		$(".like_search").bind('input propertychange', function() {
			console.log($(this).val());
			if($(this).val() == ""){
				$(".result_contain").hide("fold",200);
			}else{
				$(".result_contain").show("fold",200);
				/*判断.result_list是否含有子元素，没有隐藏，并让result_kong显示*/
				if($(".result_list").children().length == 0){
					$(".result_list").hide();
					$(".result_kong").show();
				}else{
					$(".result_list").show();
					$(".result_kong").hide();
				}
			}
		})
	</script>
</body>
</html>